<template>
    <div class="home">
        <div class="mapLeft" :style="dynamicStyle">
            <MapComponent ref="mapRef" class="mapContent" :showweather="Show" :rightIsShow="isShow" :dockMan="false" />
        </div>
        <div class="boxRight" :style="{ width: (isShow ? 265 + 'px' : 0) }">
            <div>
                <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
                    <el-tab-pane label="机场列表" name="first">
                        <div v-for="(item, index) in airportList" :key="index" style="color: white;">
                            <div class="dock" :class="{ 'active-dock': selectedDockId === item.id }"
                                @click="handleView(item.id, item.name)" @mouseenter="hoverDockId = item.id"
                                @mouseleave="hoverDockId = null">
                                <span style="margin-left: 10px;">{{ item.name }}</span>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div class="viewBox" v-if="isView">
            <div class="title">
                {{ dockName }}
            </div>
            <div style="padding: 2px 12px 18px;font-size: 13px;">
                <div class="neirong">作业范围(km)</div>
                <el-input v-model="form.workRange" placeholder="Please input" @input="handleChange" type='number' />
                <div class="neirong">自动返航风速(m/s)</div>
                <el-input v-model="form.returnWindSpeed" placeholder="Please input" type='number' />
                <div class="neirong">阻飞、自动返航雨量/雪量</div>
                <el-select v-model="form.returnRainfall" clearable>
                    <el-option v-for="dict in return_weather" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
                <div class="neirong">推流协议</div>
                <el-select v-model="form.streamProtocol" placeholder="Select">
                    <el-option v-for="dict in push_stream_protocol" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </div>

            <div style="display: flex;justify-content: space-around;">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>

        </div>
    </div>
</template>
<script setup name="Index">
import MapComponent from "@/components/MapComponent/index.vue";
import { getAllDockName, getConfigByDockId } from '@/api/equipment/config';

import {
    listConfig,
    getConfig,
    delConfig,
    addConfig,
    updateConfig
} from "@/api/equipment/config";
import { color } from "echarts";
import { ref } from 'vue'
import { set } from "nprogress";


const value = ref('')
const input = ref('')

const { proxy } = getCurrentInstance();
const { return_weather } = proxy.useDict("return_weather");
const { push_stream_protocol } = proxy.useDict("push_stream_protocol");
const mapWidth = ref(319)

const isView = ref(false)

const airportList = ref([])

const dynamicStyle = computed(() => ({
    width: `calc(100vw - ${mapWidth.value}px)`
}))
const activeName = ref('first')

const isShow = ref(true)

const Show = ref(false)


const mapRef = ref(null);

const form = ref({
    workRange: '',
    returnWindSpeed: '',
    returnRainfall: '',
    streamProtocol: ''
})

const handleShow = () => {
    if (isShow.value) {
        mapWidth.value = 54
    } else {
        mapWidth.value = 319
    }
    isShow.value = !isShow.value
}

const handleClick = () => {

}

const dockName = ref()

// 添加选中状态响应式变量
const selectedDockId = ref(null)
// 新增悬停状态响应式变量
const hoverDockId = ref(null)
const handleView = async (id, name) => {
    mapRef.value.clearPointImg()
    mapRef.value.clearCircle()
    selectedDockId.value = id;
    isView.value = 1;
    try {
        const response = await getConfigByDockId(id);
        form.value = response.data;
        // debugger; // 异步回调中的断点（先执行）
        const number = Number(form.value.workRange) * 1000;
        if (isNaN(number) || number <= 0) {
            console.error("半径必须是有效正数");
            return;
        }
        mapRef.value.drawgPointImg({ lng: 120.151837, lat: 35.971190, alt: 50 });
        mapRef.value.drawExistingCircle(120.151837, 35.971190, number);

    } catch (error) {
        console.error("请求失败:", error);
    }
    dockName.value = name;
    // debugger; // 同步代码中的断点（后执行）
};

// 获取机场列表数据
const getList = () => {
    getAllDockName().then(response => {
        airportList.value = response || [];
    });
}

// 组件挂载时获取数据
onMounted(() => {
    getList();
});


/** 提交按钮 */
function submitForm() {
    /* proxy.$refs["configRef"].validate(valid => {
        if (valid) { */
    if (form.value.id != null) {
        updateConfig(form.value).then(response => {
            proxy.$modal.msgSuccess("修改成功");
            isView.value = false;
            getList();
        });
    }
    else {
        addConfig(form.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            isView.value = false;
            getList();
        });
    }
    selectedDockId.value = 0;

    /*    }
   }); */
}

// 取消按钮
function cancel() {
    isView.value = false;
    selectedDockId.value = 0;

    mapRef.value.clearCircle()
    mapRef.value.clearPointImg()
    reset();
}

// 表单重置
function reset() {
    form.value = {
        id: null,
        dockId: null,
        workRange: null,
        returnWindSpeed: null,
        returnRainfall: null,
        streamProtocol: null,
        isDelete: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
    };
    proxy.resetForm("configRef");
}

// /** 修改按钮操作 */
// function handleUpdate(row) {
//     reset();
//     const _id = row.id || ids.value
//     getConfig(_id).then(response => {
//         form.value = response.data;
//         isView.value = true;
//         title.value = "修改机场设置";
//     });
// }
const handleChange = () => {
    console.log(
        'workRange 值:', form.value.workRange,
        '类型:', typeof form.value.workRange,
        '是否为有效数字:', Number.isFinite(form.value.workRange)
    );

    const rawValue = form.value.workRange;
    const number = Number(rawValue)
    console.log(number);
    console.log(typeof number);
    // 转换为数字（允许字符串数字，如 "2"）
    if (rawValue != 0) {
        // console.log(111111);

        const numericValue = Number(rawValue);

        if (!isNaN(numericValue) && Number.isFinite(numericValue) && numericValue != null) {
            // console.log('有效数字:', numericValue);
            mapRef.value.updateCircleRadius('', numericValue * 1000);
        } else {
            console.error('workRange 必须是一个有效数字');
        }
    }
    // mapRef.value.updateCircleRadius('',form.value.workRange*1000)
}

const value2 = Number(form.value.workRange);

const handleMark = () => {
    //   mapRef.value.drawgPointImg({lng:120.151837,lat:35.971190,alt:50})
    //   mapRef.value.drawExistingCircle(120.151837,35.971190,8000)
}

setTimeout(() => {
    handleMark()
}, 100)

</script>

<style scoped lang="scss">
.home {
    display: flex;
    width: 100%;
    position: relative;
    height: 100vh;

    :deep(.switchBox) {
        right: 476px !important;
    }

    :deep(.toolBox) {
        right: 476px !important;
    }

    .mapLeft {
        position: relative;

        .mapContent {
            position: absolute;
            width: 100vw;
            height: 100vh;
            z-index: 4;


        }



    }

    .boxRight {
        height: 100vh;
        width: 266px;
        position: absolute;
        right: 0;
        background-color: rgb(54, 51, 51);
        z-index: 99999;

        :deep(.el-tabs__header) {
            .el-tabs__nav {
                .is-active {
                    color: white;
                }
            }

            .el-tabs__item {
                color: #afafb0;
                padding: 0px;
            }
        }

        .dock {
            height: 40px;
            width: 90%;
            background-color: #576777;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 1px;
            border-radius: 10px;
            display: flex;
            align-items: center;
        }

        /* 新增激活状态样式 */
        .active-dock {
            background-color: #409eff !important;
            /* Element Plus 主题蓝色 */
            box-shadow: 0 2px 12px rgba(64, 158, 255, 0.3);
        }

        /* 悬停状态样式 */
        .dock:hover {
            background-color: #657687;
            /* 基础悬停颜色 */
        }
    }

    .viewBox {
        height: 360px;
        width: 260px;
        position: absolute;
        right: 270px;
        top: 50px;
        z-index: 99;

        //color: rgb(22, 16, 16);
        .title {
            height: 49px;
            color: #fff;
            padding: 13px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, .2);
        }

        .neirong {
            color: #fff;
            font-size: 13px;
            height: 20px;
            line-height: 20px;
            margin-top: 10px;
        }

        :deep(.el-input__wrapper) {
            background-color: #1c1c1c;
            color: white;
        }

        :deep(.el-input__inner) {
            color: white;
        }

        :deep(.el-select__wrapper) {

            background-color: #1c1c1c;
        }

        :deep(.el-select__selected-item) {
            color: white;
        }



        /* position: absolute;
        top: 58px;
        z-index: 102;
        right: 280px;
        width: 272px;
        max-height: 432px; */
        background: #282828;

    }
}
:deep(.el-input__inner[type="number"]) {
    -moz-appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}
</style>